import React from "react";
import {Form,Input,Button} from "antd"
import {UserOutlined,LockOutlined } from '@ant-design/icons'; //5.20 版本的使用方式
import "./index.css"
import {loginApi} from "../../api/login"
import {useNavigate} from 'react-router-dom'

const Login = () => {
  const Navigate = useNavigate()
  const onFinish = async(values) => {
    console.log('Received values of form: ', values);
    const res = await loginApi(values)
    console.log(res)
    if(res.code === 200){
      sessionStorage['tk']=res.data.token
      Navigate('/home')
    }
  };
  return (
    // <h1>登录</h1>
    <div className="login-bg">
    <div className="login-container">
      <Form
        name="login"
        layout="vertical"
        initialValues={{ remember: true }}
        style={{ maxWidth: 360 }}
        onFinish={onFinish}
      >
        <Form.Item 
         label="用户名"
         name="name"
         rules={[{ required: true, message: '请输入用户名' }]}
        >
            <Input type="text" placeholder="请输入用户名"  prefix={<UserOutlined />}/>
        </Form.Item>
        <Form.Item 
          label="密码"
           name="pwd"
           rules={[{ required: true, message: '请输入密码' }]}
        >
            <Input  type="password" placeholder="请输入密码"  prefix={<LockOutlined />}/>
        </Form.Item>
        <Form.Item>
            <Button block type="primary" htmlType="submit"> 登录</Button>
      </Form.Item>
      </Form>
     </div> 
    </div>
  )
}
export default Login